<script setup lang="ts">
const props = defineProps({
  itemData:{
    type: Object,
    default: ()=>{}
  }
})
</script>

<template>
	<div class="evaluate-item" v-if="props.itemData.id">
		<img class="bg1" src="~/assets/evaluate-bg-1.png" alt="">
		<img class="bg2" src="~/assets/evaluate-bg-2.png" alt="">
		<div class="head">
			<img :src="props.itemData.profile" alt="">
			<div class="name">
				<p class="name-text">{{props.itemData.nickName}}</p>
				<p class="name-tips">{{props.itemData.companyName}} - {{props.itemData.dutiesName}}</p>
			</div>
		</div>
		<p class="evaluate-text">
			{{props.itemData.recommend}}
		</p>
	</div>
</template>

<style scoped lang="scss">
.evaluate-item{
	width: 388px;
	flex: 0 0 388px;
	height: 276px;
	background: #FFFFFF;
	border-radius: 24px;
	border: 1px solid rgba(25,30,40,0.08);
	padding: 32px;
	box-sizing: border-box;
	margin-right: 24px;
	position: relative;
}
.bg1{
	width: 95px;
	height: 61px;
	position: absolute;
	top:16px;
	right: 16px;
	z-index: 1;
}
.bg2{
	width: 42px;
	height: 32px;
	position: absolute;
	bottom: 24px;
	right: 24px;
	z-index: 1;
}
.head{
	display: flex;
	img{
		width: 48px;
		height: 48px;
		flex: 0 0 48px;
		margin-right: 12px;
	}
	.name{
		flex: 1;
		margin-bottom: 24px;
		.name-text{
			color: #191E28;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 4px;
		}
		.name-tips{
			color: rgba(25,30,40,0.36);
		}
	}
}
.evaluate-text{
	color: rgba(25,30,40,0.84);
	line-height: 28px;
}
</style>